<template>
  <div>
    <el-select placeholder="请选择省份" v-model="province" clearable>
      <el-option
        v-for="item in areas"
        :key="item.province"
        :value="item.province"
        :label="item.province"
      />
    </el-select>
    <el-select :disabled="!province" placeholder="请选择城市" v-model="city" clearable>
      <el-option
        v-for="item in selectCity"
        :key="item.city"
        :value="item.city"
        :label="item.city"
      />
    </el-select>
    <el-select :disabled="!province || !city" placeholder="请选择区域" v-model="area" clearable>
      <el-option
        v-for="item in selectArea"
        :key="item.area"
        :value="item.area"
        :label="item.area"
      />
    </el-select>
  </div>
</template>

<script setup lang='ts'>
import { ref, watch } from 'vue'
import allAreas from '../lib/pca-code.json'

defineOptions({
  name: 'VChooseArea'
})

const province = ref<string>('')
const city = ref<string>('')
const area = ref<string>('')
const areas = ref(allAreas)

const selectCity = ref<any>([])
const selectArea = ref<any>([])

const emits = defineEmits(['change'])

watch(() => province.value, val => {
  if(val) selectCity.value = areas.value.find(item => item.province === val)!.citys
  city.value = ''
  area.value = ''
})

watch(() => city.value, val => {
  if(val) selectArea.value = selectCity.value.find(item => item.city === val)!.areas
  area.value = ''
})

watch(() => area.value, val => {

  emits('change', val)
})
</script>
